<template>
    <div>
        <div style=" float: right;margin-right: 20px;">
            <el-button type="warning" size="mini" id="audit" @click="audit()"><i class="el-icon-finished"></i>审批
            </el-button>
            <br/>
            <el-button style="margin-top: 10px;" type="warning" size="mini" id="withdraw" @click="withdraw"><i
                    class="el-icon-back"></i>撤回
            </el-button>
            <br/>
            <el-button style="margin-top: 10px;" type="success" size="mini" id="printBtn" v-print="printObj"><i
                    class="el-icon-printer"></i>打印
            </el-button>
            <br/>
            <el-button style="margin-top: 10px;" type="primary" size="mini" id="export"><i class="el-icon-sold-out"></i>导出
            </el-button>
        </div>
        <!--startprint-->
        <form class="wrapper" id="wrapperApplyPurchaseTable" style="font-size: 14px">
            <div class="header">
                <img src="/image/logo.jpg" /><label>固基行远，协晨悟通</label>
            </div>
            <h2 class="Title">固远晨通科技发展有限公司申购单</h2>
            <div class="baseInfo">
                <div class="worderWrapper">
                    <label class="">申请部门：</label>
                    <span class="department">{{ GetDepartmentName(Applypurchase.DepartmentId) }}</span>
                </div>
                <div class="worderWrapper">
                    <label class="">申请人：</label>
                    <span class="ApplyUserId">{{ GetUserName(Applypurchase.ApplyUserId) }}</span>
                </div>
                <label class=" ">申购日期：</label>
                <span class=" ">{{ PurchaseDate_conversion(Applypurchase.ApplyDate) }}</span>
            </div>
            <div class="baseInfo" style="border-top:none;">
                <div class="worderWrapper">
                    <label class="">采购类型：</label>
                    <span class="PurchaseType" v-if="Applypurchase.PurchaseType==1">办公用品</span>
                    <span class="PurchaseType" v-if="Applypurchase.PurchaseType==2">生产原料</span>
                    <span class="PurchaseType" v-if="Applypurchase.PurchaseType==3">仪器设备</span>
                    <span class="PurchaseType" v-if="Applypurchase.PurchaseType==4">其他</span>
                </div>
                <div class="worderWrapper">
                    <label class="">交付日期：</label>
                    <span class="DeliveryDate">{{ PurchaseDate_conversion(Applypurchase.DeliveryDate) }}</span>
                </div>
                <label class=" ">是否有发票：</label>
                <span class="IsInvoice" v-if="Applypurchase.IsInvoice">是</span>
                <span class="IsInvoice" v-else>否</span>
            </div>
            <table class="report_data" id="LAY-EXPORT-TEST" rules=all>
                <thead>
                <tr>
                    <th style="width: 5%">序号</th>
                    <th style="width: 10%">名称</th>
                    <th style="width: 25%">规格型号</th>
                    <th style="width: 10%">数量</th>
                    <th style="width: 10%">单位</th>
                    <th style="width: 10%">参考单价</th>
                    <th style="width: 10%">参考总价</th>
                    <th style="width: 10%">到货地址</th>
                    <th style="width: 10%">参考网址</th>
                </tr>
                </thead>
                <tr v-for="(d,i) in tableData">
                    <td>{{ i+1 }}</td>
                    <td>{{ d.DeviceName }}</td>
                    <td>{{ d.DeviceModel  }}</td>
                    <td>{{ d.Amount  }}</td>
                    <td>{{ d.Unit   }}</td>
                    <td>{{ d.ReviewUnitPrice    }}</td>
                    <td>{{ d.TotalPrice    }}</td>
                    <td>{{ d.ArrivalAddress    }}</td>
                    <td style="width:400px">
                        <a :href="d.ReferenceWebsite" target="_blank" style="text-decoration: none">
                            {{ d.ReferenceWebsite }}
                        </a>
                    </td>
                </tr>
            </table>
            <div class="price style">
                <label class=" ">费用总计（小写）：￥</label>
                <label class=" " style="margin-right:100px;">{{ Capitalion }}</label>
                <label class=" ">（大写）：人民币<span id="Capitalization"></span></label>
                <label class=" ">{{ CapitalionChinese}}</label>
            </div>
            <div class="remark style">
                <label class=" ">用途说明：</label>
                <label class="">{{ Applypurchase.ApplyPurchaseCause }}</label>
            </div>
            <div class="project style">
                <label class=" ">关联项目：</label>
                <label class="" id="project">{{ GetProjectName(Applypurchase.ProjectId) }}</label>
            </div>
            <table class="report_audit" rules=all>
                <tbody id="auditPeople"></tbody>
                <tr>
                    <td>说明</td>
                    <td>
                        <div style="margin-top: 5px">1.清单以下空白处划截止竖道</div>
                        <div style="margin-top: 5px">2.参考单价认真复核并填写</div>
                        <div style="margin-top: 5px">3.行政运营部负责存档保存</div>
                    </td>
                </tr>
            </table>
            <div class="author"><span>固远晨通科技发展有限公司制</span></div>
            <div id="Footer">
                <div><span style="margin-right: 100px;">固远晨通科技发展有限公司</span><span>网址：<a>www.guyuanct.com</a></span></div>
                <div><span>地址：成都西区大道199号成都模具工业园C1栋</span></div>
            </div>
        </form>

        <el-dialog v-if="AuditComment_show" :modal="false"  :visible.sync="AuditComment_show" width="40%" title="审批"  :before-close="onClose">
            <AuditComment ref="AuditCommentRef" :approval-receipt="Approval_event" :approval="Approval"></AuditComment>
        </el-dialog>

    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import AuditComment from "../../AuditComment";

    export default {
        name: "ApplyPurchaseTable",
        components: {
            'AuditComment': AuditComment,
        },
        props: {
            Applypurchase: {
                type: Object,
                required: true
            },
            auditRule: {
                type: Object,
                required: true
            },
            AllProject: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
        },
        created() {
            // 注入AllUsers数据
            publicjs.getAllUsers(this.$store.state.AllUsers)
            this.init(this.Applypurchase)
        },
        watch: {
            Applypurchase: function (obj) {
                this.init(obj)
            }
        },
        data() {
            return {
                //表格数据
                tableData: [],
                //总价
                Capitalion: 0,
                //总价汉字大写
                CapitalionChinese: '',
                //审批弹框
                AuditComment_show: false,
                // 审批弹窗返回数据
                Approval: {
                    State: 1,
                    Comment: '',
                },
                printObj: {
                    id: "wrapperApplyPurchaseTable",  //打印标签的id
                    popTitle: '',  //文件标题
                },
            }
        },
        methods: {
            //表格数据绑定
            init(obj) {
                this.Capitalion = 0
                this.CapitalionChinese = ''
                let loadding = this.openLoading();
                this.$http.get('Report/GetDetialApplyPurchaseGoods?ApplyPurchaseNumber=' + obj.ApplyPurchaseNumber).then(res => {
                    loadding.close();
                    this.tableData = res.data
                    this.tableData.forEach(item => {
                        this.Capitalion = publicjs.dcmAdd(this.Capitalion, item.TotalPrice)
                    })
                    this.CapitalionChinese = publicjs.Arabia_To_SimplifiedChinese(this.Capitalion)
                    publicjs.AddAuditPeople(this.Applypurchase, null, this.auditRule)
                })
            },
            //获取对应人员名字
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //获取对应部门名字
            GetDepartmentName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllDepartment.length; i++) {
                        if (this.AllDepartment[i].Id == value) {
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取对应项目名字
            GetProjectName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllProject.length; i++) {
                        if (this.AllProject[i].Id == value) {
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                }
            },
            //创建时间转化
            PurchaseDate_conversion(val) {
                return (val.split(' '))[0]
            },
            //审批弹框
            audit() {
                this.AuditComment_show = true
            },
            // 审批撤回
            withdraw() {
                this.$confirm('您确定要撤回吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (!this.$store.state.enumDes.length) {
                        this.$message.error('数据错误,请重新登录!');
                        return
                    }
                    let Modulenumber = "";
                    for (let i = 0; i < this.$store.state.enumDes.length; i++) {
                        if (this.$store.state.enumDes[i].key === "ApplyPurchase") {
                            Modulenumber = this.$store.state.enumDes[i].value;
                            break;
                        }
                    }
                    this.$http.post("PublicMethodApi/RevokeApproveState", {
                        FormId: this.Applypurchase.Id,
                        Modulenumber: Modulenumber,
                    }).then(res => {
                        if(res.data.Status){
                            this.$http.get('Report/ApplyPurchaseOrder?ApplyPurchaseNumber=' + this.Applypurchase.ApplyPurchaseNumber).then(res => {
                                if (res.data.obj != null) {
                                    publicjs.AddAuditPeople(res.data.obj, null, res.data.auditRule)
                                }
                            })
                            this.$message.success(res.data.Message)
                            this.$parent.$parent.formdata()
                        }else{
                            this.$message.error(res.data.Message)
                        }
                    }).catch(() => {
                        this.$message.error('服务器异常,请联系管理员!')
                    })
                }).catch(() => {

                })
            },
            // 关闭审批结果组件
            async onClose(done) {
                await done();
                this.$refs["AuditCommentRef"].FormClose_event();
            },
            //审批
            Approval_event() {
                let loadding = this.openLoading();
                this.$http.post('Purchase/AuditApplyPurchaseOrder', {
                    ApplyPurchaseNumber: this.Applypurchase.ApplyPurchaseNumber,
                    State: this.Approval.State,
                    Comment: this.Approval.Comment,
                }).then(res => {
                    loadding.close();
                    if (res.data.IsSuccess) {
                        this.$http.get('Report/ApplyPurchaseOrder?ApplyPurchaseNumber=' + this.Applypurchase.ApplyPurchaseNumber).then(res => {
                            if (res.data.obj != null) {
                                publicjs.AddAuditPeople(res.data.obj, null, res.data.auditRule)
                            }
                        })
                        this.$message.success(res.data.Msg)
                        this.$parent.$parent.formdata()
                    } else {
                        this.$message.warning(res.data.Msg)
                    }
                    this.AuditComment_show = false
                })
                this.$refs["AuditCommentRef"].FormClose_event();
            }
        }
    }
</script>

<style scoped>
    /*外包装样式*/
    .wrapper {
        width: 80%;
        height: 100%;
        margin: auto;
    }
    /*页眉样式*/
    .header {
        font-weight: bold;
        font-size: 20px;
        font-family: cursive;
        width: 80%;
        margin: auto;
        border-bottom: 2px solid black;
        padding: 10px 0px;
        position: relative;
    }

    .header img {
        width: 200px;
        height: 55px;
    }

    .header label {
        position: absolute;
        bottom: 10px;
        right: 70px;
    }
    /*标题样式*/
    h2 {
        width: 80%;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*标题样式*/
    h4 {
        width: 80%;
        text-align: center;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*数据表格样式*/
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }

    .report_data tr {
        height: 40px;
    }

    .report_data th {
        font-weight: 100;
    }

    .baseInfo {
        height: 20px;
        line-height: 20px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

    .baseInfo .worderWrapper {
        display: inline-block;
        width: 200px;
    }

    .style {
        height: 40px;
        line-height: 40px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

    .price {
        border-top: none;
    }
    /*审核表格样式*/
    .report_audit {
        width: 100%;
        border: 1px solid black;
        font-size: 14px;
    }
    .report_audit .tdCenter {
        text-align: center;
    }

    .report_audit tr {
        height: 70px;
    }

    .report_audit tr p {
        padding: 3px;
    }

    .report_audit td {
        padding: 0 10px;
    }

    .report_audit td:first-child {
        width: 150px;
    }

    .report_audit .tr_center {
        text-align: center;
    }

    tr p.audit {
        font: italic bold 20px/30px arial,sans-serif;
        text-align: right;
        /*padding-right: 110px;*/
    }

    tr p.audit span {
        display: inline-block;
        width: 100px;
        font: bold 17px/30px arial,sans-serif;
    }

    tr p.gray {
        color: gray;
    }

    tr p.audit span.red {
        color: red;
    }

    tr p.audit span.blue {
        color: blue;
    }

    .time {
        width: 100%;
        text-align: right;
    }

    .author {
        width: 80%;
        margin: auto;
        margin-top: 5px;
        font-weight: bold;
        text-align: right;
    }
    /*页脚样式*/
    #Footer {
        width: 80%;
        margin: auto;
        border-top: 2px solid black;
        margin-top: 60px;
        font-weight: bold;
    }

    #Footer div {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    /*设置搜索框居中*/
    #search {
        text-align: center;
        padding: 0px;
    }

    #search select {
        text-align: left;
    }
    /*折叠面板样式修改*/
    .layui-collapse .layui-colla-title {
        margin: 0;
        width: 100%;
        text-align: left;
    }

    .wrapperReport {
        width: 100%;
        height: 100%;
        margin: auto;
    }
    /*报表管理下统计报表的样式*/
    #EchartData .pie {
        height: 500px;
    }

    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    .report_data .tr_one {
        height: 50px;
    }

    .report_data .tr_two {
        height: 100px;
    }

    .report_data .td_Title {
        font-weight: bold;
    }

    .td_left {
        text-align: left;
        padding-left: 20px;
    }

    .td_Content {
    }

    .report_data .layui-disabled, .report_data .layui-disabled:hover {
        color: black !important;
    }

    .report_data .layui-form-radio > i:hover, .report_data .layui-form-radioed > i {
        color: #5FB878 !important;
    }
</style>
